$(document).ready(function(){

var addNewBlog = $('.div_3_of_4').find('.add-new');
var outputBlog = '<div class="rp-blog-wrapper">';
		outputBlog += '<h2 class="rp-blog-title">';
			outputBlog +=  '<span class="orig"></span>';
			outputBlog += '<input type="text" class=" rp-edit-title" name="" id="" value="">';
		outputBlog += '</h2>';
		outputBlog += '<p class="rp-blog-subject">';
			outputBlog +=  '<span class="orig"></span>';
			outputBlog += '<textarea class=" rp-edit-blog-content" style="width:100%;"></textarea>';
		outputBlog += '</p>';
		outputBlog += '<ul>';
		outputBlog += 	'<li class="button edit-btn">Edit</li>';
		outputBlog += 	'<li class="button del-btn">Delete</li>';
		outputBlog += '</ul>';
		/*outputBlog += '<div class="button edit-btn">Edit</div>';
		outputBlog += '<div class="button del-btn">Delete</div>';*/	
	outputBlog += '</div>';		
	//console.log(addNewBlog)

	$.ajax({
		type: 'POST',
		url: 'php/insert.php',
		data: {action: 'loadInsert'},
		success: function(data){
			$('.appendData').append(data);
		}
	});
	
	addNewBlog.on('click', function(){ 

		var outputBlogrender = $(outputBlog);
		$(this).parents('.div_3_of_4').append(outputBlogrender);
		
		var edBtn = outputBlogrender.find('.rp-blog-subject').next();
		var delBtn = outputBlogrender.find('ul').children().eq(1);
		
		var Edit = false;

		 //initial hiding
		 $('.rp-blog-wrapper').find('.rp-blog-title').children().next().attr('show', 'false').hide();
		 $('.rp-blog-wrapper').find('.rp-blog-subject').children().next().attr('show', 'false').hide();
		

		edBtn.on('click', function(event){
		

			//showing / hiding editable forms
			if (Edit === false) {
				
				
				//showing editable blog title
				$(this).parents('.rp-blog-wrapper').find('.rp-blog-title').children().next().attr('show', 'true').show();
				//showing editable content area
				$(this).parents('.rp-blog-wrapper').find('.rp-blog-subject').children().next().attr('show', 'true').show();

				$(this).children().eq(0).text('Done');
				Edit = true;
			}else{

				//hiding editable blog title	
				$(this).parents('.rp-blog-wrapper').find('.rp-blog-title').children().next().attr('show', 'false').hide();
				//showing editable content area	
				$(this).parents('.rp-blog-wrapper').find('.rp-blog-subject').children().next().attr('show', 'false').hide();
				
				//getting the value of inputs
				var title = $(this).parents('.rp-blog-wrapper').find('.rp-blog-title').children().next().val();
				var cont = $(this).parents('.rp-blog-wrapper').find('.rp-blog-subject').children().next().val();
				$(this).children().eq(0).text('Edit');
				Edit = false;

				if (title != '' && cont != '') {
						
					$.ajax({
						type: 'POST',
						url: 'php/insert.php',
						data: {action: 'saveInsert', value1:title, value2:cont},
						success: function(data){
							$('.rp-blog-wrapper').find('.rp-blog-title').children().text(title);
							$('.rp-blog-wrapper').find('.rp-blog-subject').children().text(cont);
						} 
					});
				};

			};		
			
		});
		


		var confirmContent =  $('<p>Are you sure you want to delete this blog?</p><Br/><div class="button confirm-delbtn">Yes Delete it!</div>');
		
		delBtn.on('click', function(){
			//modal.open({content: confirmContent, background:"red"});
			var title = $(this).parents('.rp-blog-wrapper').find('.rp-blog-title').children().next().val();
			var cont = $(this).parents('.rp-blog-wrapper').find('.rp-blog-subject').children().next().val();
			$.ajax({

				type: 'POST',
				url: 'php/insert.php',
				data: {action: 'deleteInsert', value1:title, value2:cont},
				success: function(data){
					$('.rp-blog-wrapper').each(function(){
						$(this).animate({
							opacity:0
							}, function(callback){
								callback = $(this).each(function(){
									$(this).remove();
								})
	
						})	
					});		
				}

			})
	
		});
	
	
	});


});

